<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title" onlyHead noshadow></public-head>
		<view class="box">
			<view class="w100pc h2"></view>
			<view class="mg-l-30 f44 mg-b-30" style="color: #1E1E1E;font-weight: 600;">
				医生注册
			</view>
			<!-- 姓名 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;">
				<view class="">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">姓名</text>
				</view>
				<view class="flex aic">
					<input type="text" placeholder="请填写您的真实姓名" v-model="user_name" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
				</view>
			</view>
			<!-- 职称 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;" @click="showAction">
				<view class="">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">职称</text>
				</view>
				<view class="flex aic">
					<input type="text" placeholder="请选择" v-model="professional" :disabled="true" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/right.png" style="width:12rpx;height:20rpx" class="mg-l-10"></image>
				</view>
			</view>
			<!-- 就职医院 -->
			<view class="rel">
				<!-- <u-field v-model="hospital" label="医院" placeholder="请填写您所就职的医院名称" @input="inputs"></u-field> -->
				<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;">
					<view class="">
						<text style="color: #fff;">*</text>
						<text class="f32" style="color: #323232;">就职医院</text>
					</view>
					<view class="flex aic">
						<input type="text" placeholder="请填写就职医院" adjust-position v-model="hospital" @input="inputs" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
					</view>
				</view>
				<view class="listtit" v-if="show1">
					<view class="fsb" style="color: #FE7600;border-bottom: 1rpx solid #F0F0F0;height: 80rpx;">
						<view class="title f26" @click="tiaozhuan">
							没有医院？点这儿
						</view>
						<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/close.png" style="width:26rpx;height:26rpx" class="" @click="show1 = false"></image>
					</view>
					<scroll-view scroll-y="true" style="max-height: 340rpx;" v-if="hosplist != ''">
						<view class="title" v-for="(item,index) in hosplist" :key="index" @click="hosp(index)">
							{{item.hospital_name}}
							<view style="font-size: 12px; color: #C0C4CC;">
								{{item.address}}
							</view>
						</view>
					</scroll-view>
					<!-- <view class="title" style="" v-if="hosplist == ''">暂无该关键字...</view> -->
				</view>
			</view>
			<!-- 所在地 -->
			<!-- <view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;" @click="showActions">
				<view class="">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">你的所在地</text>
				</view>
				<view class="flex aic">
					<input type="text" placeholder="请选择" v-model="suozaidi" :disabled="true" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/right.png" style="width:12rpx;height:20rpx" class="mg-l-10"></image>
				</view>
			</view> -->
			<!-- 科室 -->
			<view class="lrmg-30 fsb" style="height: 110rpx;border-bottom: 1rpx solid #F0F0F0;" @click="showActions">
				<view class="">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">科室</text>
				</view>
				<view class="flex aic">
					<input type="text" placeholder="请选择" v-model="department" :disabled="true" style="color: #323232;text-align: right;" placeholder-style="color:#909090" class="f28" />
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/right.png" style="width:12rpx;height:20rpx" class="mg-l-10"></image>
				</view>
			</view>
			<u-action-sheet @click="clickItem" :list="jobList" v-model="show"></u-action-sheet>
			<view>
				<u-popup v-model="shows" mode="bottom" border-radius="20">
					<view class="fsb" style="height: 100rpx;width: 100%;">
						<view class="" style="width: 100rpx;height: 50rpx;"></view>
						<view class="f30 weight">选择科室</view>
						<view class="fcc" style="width: 100rpx;height: 50rpx;" @click="shows = false">
							<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/close.png" style="width:26rpx;height:26rpx" class=""></image>
						</view>
					</view>
					<view class="flex wrap lrmg-30">
						<view class="fcc mg-b-20" style="width: 33.33%;height: 60rpx;" v-for="(it,i) in options1" :key="i">
							<view class="fcc bra60" style="width: 93%;height: 100%;color: #FE7600;border: 1rpx solid #FE7600;" @click="tab2(i,it)">
								<view class="f26">{{it.name}}</view>
							</view>
						</view>
					</view>
					<view class="w100pc" style="height: 80rpx;"></view>
					<!-- <view class="box1" style="height: 800rpx;">
						<view class="left" style="height: 800rpx;">
							<scroll-view scroll-y style="height: 800rpx;">
								<view class="scroll" :class="tabNum1==index?'active':''"
									v-for="(item,index) in options1" :key="index" @click="tab1(index,item.name)">
									{{item.name}}
								</view>
							</scroll-view>

						</view>

						<view class="right" style="height: 800rpx;">
							<scroll-view scroll-y style="height: 800rpx;">
								<view class="scroll" :class="tabNum2==index?'active':''"
									v-for="(item,index) in options1[tabNum1].sub" :key="index"
									@click="tab2(index,item)">
									{{item.name}}
								</view>
							</scroll-view>
						</view>
					</view> -->
				</u-popup>
			</view>
			<view class="" style="margin: 40rpx 30rpx 0;">
				<view class="">
					<text style="color: #F55050;">*</text>
					<text class="f32" style="color: #323232;">擅长领域</text>
				</view>
				<textarea v-model="skills" placeholder="请填写您的擅长领域" style="color: #323232;height: 160rpx;" placeholder-style="color:#909090" class="f28 mg-t-20 pd-l-10 w100pc" maxlength="100" />
			</view>
			<!-- <u-field v-model="skills" label="擅长领域" type="textarea" placeholder="请填写您的擅长领域" auto-height required input-align="left">
			</u-field> -->
		</view>
		<view class="mg-t-60 red" style="text-align: center;" v-show="type == 2">审核不通过，请重新填写资料</view>
		<view class="" style="height: 200rpx;width: 100%;"></view>
		<view class="flex aic" style="position: absolute;z-index: 99;bottom: 100rpx;left: 0;width: 100%;">
			<button class="f28" style="background: #FF8F2B;color: #fff;width: 40%;" @click="quit">返回登录</button>
			<button class="f28" style="background: #FF8F2B;color: #fff;width: 40%;" @click="submit">下一步</button>
		</view>
	</view>
</template>
<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '医生注册',
				user_name: '',
				hos_name: '',
				show: false,
				shows: false,
				professional: '',
				department: '',
				hosplist:[],
				tabCurrentIndex: 0,
				hospital: '',
				hospital_id: '',
				skills:'',
				suozaidi:'',
				jobList: [{
						text: '执业兽医师',
					},
					{
						text: '执业助理兽医师'
					}
				],
				options1: [{
						name: "111",
						list: [
							"aaa", "bbb", "ccc"
						]
					},
					{
						name: "222",
						list: [
							"ddd", "eee", "fff"
						]
					},
					{
						name: "333",
						list: [
							"ggg", "hhh", "iii"
						]
					},
					{
						name: "444",
						list: [
							"jjj", "kkk", "ll"
						]
					},
					{
						name: "555",
						list: [
							"www", "ee", "yy"
						]
					},
					{
						name: "666",
						list: [
							"sad", "ttt", "nnn",
							"sad", "ttt", "nnn",
							"sad", "ttt", "nnn"
						]
					},
					{
						name: "777",
						list: [
							"www", "ee", "yy"
						]
					},
				],
				type: 1,
				tabNum1: 0,
				tabNum2: 0,
				col_id: '',
				show1:false
			}
		},
		onLoad(options) {
			that = this
			that.type = options.type
			that.get()
		},
		methods: {
			tiaozhuan(){
				uni.navigateTo({
					url:'hospital'
				})
			},
			shiqu(){
				that.show1 = false
			},
			inputs() {
				if (that.hospital == '') {
					that.show1 = false
				} else {
					that.$postAjax1('Doctorsside_search_hospital', {
						keyword: that.hospital
					}, function(data) {
						that.hosplist = data.data.data
						that.show1 = true
						console.log('模糊搜索内容', that.hosplist)
					})
				}

			},
			hosp(index) {

				that.hospital = that.hosplist[index].hospital_name
				that.hospital_id = that.hosplist[index].id
				console.log(that.hospital, that.hospital_id, index)
				that.show1 = false
			},
			quit() {
				uni.removeStorageSync('chongdoc_login');
				uni.showToast({
					icon: "none",
					title: '退出成功',
					duration: 1000
				});
				this.timer = setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
			submit() {
				if (that.user_name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if (that.professional == '') {
					uni.showToast({
						title: '请选择职称',
						icon: 'none',
						duration: 1500
					});
					return
				}
				// if(that.hospital == ''){
				// 	uni.showToast({
				// 		title: '请填写医院',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// 	that.hospital_id = ''
				// 	return
				// }
				if (that.col_id == '') {
					uni.showToast({
						title: '请选择科室',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if (that.skills == '') {
					uni.showToast({
						title: '请填写擅长领域',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if (that.skills.length < 4) {
					uni.showToast({
						title: '擅长领域最少5个字',
						icon: 'none',
						duration: 1500
					});
					return
				}
				let postData = {
					column_id: that.col_id,
					user_name: that.user_name,
					hos_name: that.hospital,
					skills:that.skills,
					hospital_id:that.hospital_id,
					professional: that.professional,
				}
				uni.navigateTo({
					url: 'Uploadcertificate?item=' + JSON.stringify(postData)
				})
			},
			get() {
				that.$postAjax1('Doctor_get_info', '', function(data) {
					that.options1 = data.data.data
				})
			},
			showAction() {
				that.show = true;
				uni.hideKeyboard()
			},
			showActions() {
				that.shows = true;
				uni.hideKeyboard()
			},
			clickItem(index) {

				that.professional = that.jobList[index].text;
				console.log('title', that.jobList[index].text)
			},

			tab1(index, name) {
				that.tabNum1 = index
				console.log(index, name)
			},
			tab2(index, item) {
				that.tabNum2 = index
				that.department = item.name
				that.col_id = item.id
				that.shows = false;
				console.log(index, item)
			},
		}

	}
</script>
<style scoped lang="scss">
	.listtit {
		position: absolute;
		top: 86rpx;
		left: 5%;
		width: 90%;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
		// border: 1rpx #e7e7e7 solid;
		// opacity: 1;
		z-index: 999;

		.title {

			padding: 10rpx 0;
		}
	}

	.box {
		background: #FFFFFF;

		.box1 {
			width: 100%;
			display: flex;

			.left {
				// display: inline-block;
				width: 30%;
				background: #f6f6f6;

				.scroll {
					padding: 30rpx 50rpx 30rpx 30rpx;
					color: #8a8a8a;

					&.active {
						color: #FA6400;
						background-color: #FFFFFF;
					}
				}
			}

			.right {
				// display: inline-block;
				width: 70%;

				.scroll {
					padding: 30rpx 50rpx 30rpx 30rpx;
					color: #8a8a8a;

					&.active {
						color: #FA6400;
						//background-color: #FFFFFF;
					}
				}
			}

		}

	}
</style>
